<div id="craftsAllotPage" v-cloak>
    <el-dialog  v-loading="craftsAllotLoading" element-loading-text="正在查找中..." :title="itemName + '（工序分配列表）'" :visible.sync="craftsAllotPageVisible" @closed="closecraftsAllotPage" fullscreen>

        <el-row>
            <!-- 工序 start -->
            <el-table :data="crafts" tooltip-effect="dark" size="mini">
                <el-table-column  prop="partsName" label="部件"></el-table-column>
                <el-table-column  prop="attributeName" label="工序"></el-table-column>
                <el-table-column  label="供应商" width="300px">
                    <template slot-scope="scope">
                        <template v-if="scope.row.alloted">
                            {{scope.row.factoryName}}
                        </template>
                        <template v-else>
                            <el-button @click="selectMerchants(scope.row, scope.$index)" size="mini">选择</el-button>
                            {{scope.row.factoryName}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="金额">
                    <template slot-scope="scope">
                        <span style="color: red" v-if="scope.row.totalPrice">{{ scope.row.totalPrice}} 元</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="address" label="地址"></el-table-column>
                <el-table-column  prop="contacts" label="联系人"></el-table-column>
                <el-table-column  prop="contactWay" label="联系方式"></el-table-column>
                <el-table-column  prop="remark" label="备注">
                    <template slot-scope="scope">
                        <template v-if="scope.row.alloted">
                            {{scope.row.remark}}
                        </template>
                        <template v-else>
                            <el-input size="small"  v-model="scope.row.remark" placeholder="请填写备注信息"></el-input>
                        </template>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.isOwn" :disabled="scope.row.alloted" @change="isOwnChange(scope.$index, scope.row)">自做</el-checkbox>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 工序 end -->
        </el-row>

        <el-row>
            <p>
                <el-button size="small" @click="addCraftsRow">添加工序</el-button>
                &nbsp;&nbsp;
                <span style="color: #F56C6C">说明：服务类的工序要直接添加，没有的联系客服</span>
            </p>

            <!-- 服务类工序 start -->
            <el-table :data="serverCrafts" v-if="serverCrafts.length > 0" size="mini">


                <el-table-column label="工序">
                    <template slot-scope="scope">
                        <template v-if="!scope.row.alloted && isBlank(scope.row.partId)">
                            <el-select v-model="scope.row.craftValueType" size="small" placeholder="请选择" >
                                <el-option
                                        v-for="item in craftsOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <template v-else>
                            <span v-if="!isBlank(scope.row.partsName)">{{scope.row.partsName}}&nbsp;-&nbsp;</span>
                            {{scope.row.attributeName}}
                        </template>
                    </template>
                </el-table-column>


                <el-table-column label="外协商">
                    <template slot-scope="scope">
                        <el-button v-if="!scope.row.alloted && isBlank(scope.row.partId)" @click="showSuppliers(scope.$index)" size="mini">选择</el-button>
                        {{scope.row.supplierName}}
                    </template>
                </el-table-column>
                <el-table-column prop="totalPrice" label="金额">
                    <template slot-scope="scope">
                        <template v-if="!scope.row.alloted">
                            <el-input size="small" v-model="scope.row.totalPrice" @change="suppPriceChange(scope.row)" placeholder="金额（单位/元）"></el-input>
                        </template>
                        <template v-else>
                            <span style="color: red">{{ scope.row.totalPrice}} 元</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column  prop="contactAddr" label="地址"></el-table-column>
                <el-table-column  prop="contactName" label="联系人"></el-table-column>
                <el-table-column  prop="contactTel" label="联系方式"></el-table-column>
                <el-table-column  prop="remark" label="备注">
                    <template slot-scope="scope">
                        <template v-if="!scope.row.alloted">
                            <el-input size="small" v-model="scope.row.remark" placeholder="请填写备注信息"></el-input>
                        </template>
                        <template v-else>
                            {{scope.row.remark}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                v-if="!scope.row.alloted && isBlank(scope.row.partId)"
                                size="mini"
                                type="danger" @click="serverCrafts.splice(scope.$index, 1);">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 服务类工序 end -->
        </el-row>

        <el-row>
            <p>订单原金额：<span style="color: #F56C6C">{{totalAmount}}</span></p>
            <p>分配订单总金额：<span style="color: #F56C6C">{{allotAmount}}</span></p>
        </el-row>

        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark" align="center">
                <el-button type="danger" @click="generateOrder" style="width: 100px;">下单</el-button>
            </div></el-col>
        </el-row>

    </el-dialog>

    <!-- 供应商 start -->
   <el-dialog title="选择供应商" :visible.sync="merchantsPageVisible">
       <el-row>
           <el-form :inline="true" class="demo-form-inline" size="mini">
               <el-form-item label="工厂名称：">
                   <el-input v-model="q.factoryName"></el-input>
               </el-form-item>
               <el-form-item label="工厂地址：">
                   <el-input v-model="q.factoryAddr"></el-input>
               </el-form-item>
               <el-form-item>
                   <el-button @click="queryMerchants" type="primary">查询</el-button>
               </el-form-item>
           </el-form>
       </el-row>

       <el-row>
           <el-table tooltip-effect="dark" :data="factoryQuoteInfosQuery" size="mini">
               <el-table-column type="index" label="序号"></el-table-column>
               <el-table-column prop="factoryInfoVO.factoryName" label="印刷厂"></el-table-column>
               <el-table-column label="联系方式及地址">
                   <template slot-scope="scope">
                       姓名：{{scope.row.factoryInfoVO.contacts}}
                       <br/>
                       联系方式：{{scope.row.factoryInfoVO.contactWay}}
                       <br/>
                       联系地址：{{scope.row.factoryInfoVO.address}}
                   </template>
               </el-table-column>
               <el-table-column  prop="factoryInfoVO.qq" label="QQ"></el-table-column>
               <el-table-column  prop="totalPrice" label="价格">
                   <template slot-scope="scope">
                       <span style="color: red">￥{{scope.row.totalPrice}}</span>
                   </template>
               </el-table-column>
               <el-table-column
                       label="操作"
                       width="100">
                   <template slot-scope="scope">
                       <el-button @click="choiceMerchant(scope.row)" type="text" size="small">选择</el-button>
                   </template>
               </el-table-column>
           </el-table>
       </el-row>

    </el-dialog>
    <!-- 供应商 end -->

    <!-- 外协商 start -->
    <el-dialog title="选择外协商" :visible.sync="supplierPageVisible">
        <el-row>
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="名称：">
                    <el-input v-model="supplierQuery.supplierName"></el-input>
                </el-form-item>

                <el-form-item label="联系人：">
                    <el-input v-model="supplierQuery.contactName"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="querySupplierPageList">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table :data="supplierPage.tableData" size="mini">
                <el-table-column  prop="supplierName" label="供应商"></el-table-column>
                <el-table-column  prop="contactName" label="联系人"></el-table-column>
                <el-table-column  prop="contactArea" label="地区"></el-table-column>
                <el-table-column  prop="contactAddr" label="地址"></el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="selectSupplier(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-size="supplierPage.pageSize"
                    small
                    layout="prev, pager, next"
                    :total="supplierPage.totalCount">
            </el-pagination>
        </el-row>
    </el-dialog>
    <!-- 外协商 end -->
</div>
<style>
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
</style>
<script src="${request.contextPath}/statics/js/modules/order/craftsAllot.js?_${.now?long}"></script>
